<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="flexWrap top-box">
					<view class="shop-name">{{storeName}}</view>
				</view>
				
				<view class="air-list-box" v-if="airList.length>0">
					<view class="air-item flexWrapNo" v-for="(item,index) in airList" :key="index">
						<view class="item-left flexWarpCenterColumn">
							<image src="@/static/index/air.png" mode=""></image>
							<text>{{item.resourceName||'--'}}</text>
						</view>
						<view class="item-right">
							<block v-if="item.relayStatus==0">
								<view class="billiards-status close">已关闭</view>
							</block>
							<block v-else>
								<view class="billiards-status open" v-if="item.airConditionerStatus==0">已开启</view>
								<view class="billiards-status close" v-if="item.airConditionerStatus==1">已关闭</view>
							</block>
							<view class="operate-box flexWrapNo">
								<view class="operate-btn flexWarpCenterColumn" @tap="goPage('/pages-hardware/airLogList?subjectId='+item.subjectId)">
									<image src="@/static/manage/log-icon.png" mode=""></image>
									<text>日志</text>
								</view>
								<view class="operate-btn flexWarpCenterColumn" @tap="operateAirConditioner(index)">
									<block v-if="item.relayStatus==1&&item.airConditionerStatus==0">
										<image src="@/static/manage/red-close-icon.png" mode=""></image>
										<text>关闭</text>
									</block>
									<block v-else>
										<image src="@/static/manage/green-close-icon.png" mode=""></image>
										<text>开启</text>
									</block>
								</view>
								<view class="operate-btn flexWarpCenterColumn" @tap="openModel(index)">
									<image src="@/static/manage/alram-icon.png" mode=""></image>
									<text>定时开关</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="empty-box" v-else>
					<image src="https://static.mo-yu.vip/wechat/images/orderEmpty.png"></image>
				</view>
				
				<view class="tips-box flexWarpColumn" v-if="changetimeFlag">
					<image src="@/static/user/close.png" mode="" class="close-btn" @tap="closeModel()"></image>
					<view class="tips-name">定时开关</view>
					<view class="tips-text">
						为了避免影响店内消费，空调关闭期间如有订单不会关闭空调，设置后每日定时执行。
					</view>
					
					<view class="label-text">定时开空调：</view>
					<view class="input-box">
						<picker mode="time" :data-index='1' :value="openTime" @change="bindDateChange">
							<view class="select-input" v-if="openTime">{{openTime}}</view>
							<view class="placeholderClass" v-else>请选择时间</view>
							<image class="arrow-icon" src="@/static/manage/arrow.png" mode=""></image>
						</picker>
					</view>
					
					<view class="label-text">定时关空调：</view>
					<view class="input-box">
						<picker mode="time" :data-index='2' :value="closeTime" @change="bindDateChange">
							<view class="select-input" v-if="closeTime">{{closeTime}}</view>
							<view class="placeholderClass" v-else>请选择时间</view>
							<image class="arrow-icon"  src="@/static/manage/arrow.png" mode=""></image>
						</picker>
					</view>
					
					<view class="btn-box flexWrap">
						<view class="tips-btn" @tap="claerTime()">清空</view>
						<view class="tips-btn noStarted" @tap="setClose()">确定</view>
					</view>
				</view>
				
				<!--操作指引悬浮按钮 -->
				<guideline :path="'pages-hardware/smartAirConditioner'"></guideline>
				
				<view class="mask-wrap" v-if="changetimeFlag"></view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				airList:[],
				storeName:"",
				curIndex:'',
				changetimeFlag:false,
				openTime:null,
				closeTime:null,
				info:{},
			}
		},
		onLoad() {
			this.storeName=uni.getStorageSync('shopname')
		},
		onShow() {
			this.getList();
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		// 下拉刷新
		onPullDownRefresh: function() {
			this.getList();
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		methods: {
			bindDateChange(e) {
				let index = e.currentTarget.dataset.index
				if (index == 1) {
					this.openTime = e.target.value
				} else {
					this.closeTime = e.target.value
				}
			},
			closeModel(){
				this.changetimeFlag=false
				this.openTime = null
				this.closeTime = null
			},
			openModel(index){
				this.curIndex=index
				this.getTask()
				this.changetimeFlag=true
			},
			
			// 获取空调设备列表
			getList(){
				this.$tools.loadIng()
				this.$request.post(this.$api.airConditionerList, {
					storeId:uni.getStorageSync('store_id')
				}, {
					isJava:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==200) {
						this.airList=data
					}
				}).finally(() => {
					setTimeout(() => {
						this.$tools.hideLoading()
					}, 1000)
				})
			},
			
			// 开启或关闭空调
			operateAirConditioner(index){
				let title=''
				let tag=0
				let data=this.airList[index]
				if(data.relayStatus==1&&data.airConditionerStatus==0){  // 开启状态
					title='是否确定关闭空调？'
					tag=2
				}else{
					title='是否确定开启空调？'
					tag=1
				}
				uni.showModal({
					title:title,
					success: (res) => {
						if(res.confirm){
							uni.showLoading({
								title:'请稍等...',
								mask:true
							})
							this.$request.post(this.$api.airOpenAndClose, {
								storeId:uni.getStorageSync('store_id'),
								subjectId:data.subjectId,
								resourceId:data.resources,
								jdqResourceId:data.jdqResources,
								onAndOff:tag,
							}, {
								isJava:true
							}).then(res => {
								console.log(res)
								if (res.code==200) {
									this.$tools.hideLoading()
									if(tag==1){
										this.$tools.showToast('开启成功')
									}else{
										this.$tools.showToast('关闭成功')
									}
									this.getList()
								}
							}).finally(() => {
								setTimeout(()=>{
									this.$tools.hideLoading()
								}, 1000)
							})
						}
					}
				})
			},
			
			// 去掉秒数
			removeSeconds(time) {
				const timeArray = time?time.split(':'):[];
				timeArray.pop();
				return timeArray.join(':');
			},
			
			// 获取配置的定时开关
			getTask(){
				this.$request.post(this.$api.airGetTask, {
					storeId:uni.getStorageSync('store_id'),
					subjectId:this.airList[this.curIndex].subjectId
				}, {
					isJava:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==200&&data) {
						this.info=data
						if(data.openTime){
							this.openTime=this.removeSeconds(data.openTime)
						}
						if(data.closeTime){
							this.closeTime=this.removeSeconds(data.closeTime)
						}
					}
				})
			},
			
			// 设置定时开关
			setClose(){
				this.$request.post(this.$api.airEditTask, {
					id:this.info.id||'',
					storeId:uni.getStorageSync('store_id'),
					subjectId:this.airList[this.curIndex].subjectId,
					openTime:this.openTime?this.openTime+':00':this.openTime,
					closeTime:this.closeTime?this.closeTime+':00':this.closeTime,
				}, {
					isJava:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==200) {
						this.$tools.showToast('设置成功')
						this.closeModel()
					}
				})
			},
			
			// 时间清空
			claerTime(){
				this.openTime=null
				this.closeTime=null
			},
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 36upx 10upx;
	}
	.top-box{
		border-bottom:1rpx solid #161653;
		padding:0 24upx;
		padding-bottom:24upx;
		.shop-name{
			font-size: 36upx;
			font-weight: bold;
			line-height: 50upx;
			color: #FFFFFF;
		}
	}
	
	.air-list-box{
		margin-top: 56rpx;
		padding: 0 32rpx;
		.air-item{
			gap: 32rpx;
			margin-bottom: 48rpx;
			.item-left{
				image{
					width:180rpx;
					height: 94rpx;
				}
				text{
					margin-top: 10rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
			.item-right{
				.billiards-status{
					width: 124rpx;
					height: 44rpx;
					border-radius: 24rpx;
					line-height: 44rpx;
					font-weight: 500;
					font-size: 24rpx;
					text-align: center;
				}
				.open{
					color: #FFB726;
					border: 2rpx solid #FFB726;
				}
				.close{
					color: #59B73D;
					border: 2rpx solid #59B73D;
				}
				
				.operate-box{
					margin-top: 32rpx;
					gap: 16rpx;
					.operate-btn{
						width: 104rpx;
						height: 104rpx;
						background: #1D1D5D;
						border-radius: 14rpx;
						font-size: 20rpx;
						color: #FFFFFF;
						justify-content: center;
						image{
							width: 40rpx;
							height: 40rpx;
							margin-bottom: 6rpx;
						}
					}
				}
			}
		}
	}
	
	
	.tips-box{
		width: 660upx;
		height:652upx;
		padding: 40rpx 48rpx;
		box-sizing: border-box;
		background:#1D1C5C;
		border-radius: 16upx;
		position: fixed;
		top: 400upx;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 999;
		.close-btn{
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
		.tips-name{
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 800;
			line-height: 50upx;
			color: #FFFFFF;
			text-align: center;
		}
		.tips-text{
			font-size: 24rpx;
			color: rgba(255,255,255,0.5);
			width: 560upx;
			margin-top: 12upx;
		}
		.label-text{
			font-weight: 500;
			font-size: 26rpx;
			color: #FFFFFF;
			margin-top: 28rpx;
		}
		/deep/.input-box{
			height: 56upx;
			width: 350upx;
			background: #312F80;
			border-radius: 8upx;
			padding: 0 32upx;
			margin-top: 34upx;
			margin-left: 40rpx;
			position: relative;
			picker{
				height: 100%;
			}
			.arrow-icon{
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				top: 50%;
				right: 12rpx;
				transform: translateY(-50%);
				pointer-events: none;
			}
			.select-input{
				height: 56upx;
				line-height: 56upx;
				font-size: 28upx;
				color:#fff;
				flex: auto;
			}
			.placeholderClass{
				height: 56upx;
				line-height: 56upx;
				font-size: 24upx;
				color:rgba(255,255,255,.5);
			}
		}
		
		.btn-box{
			margin-top: 56upx;
			.tips-btn{
				width: 260upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				border: 2upx solid #26BCFD;
				border-radius: 16upx;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #26BCFD;
			}
			.noStarted{
				color: #FFFFFF;
				background-color: #26BCFD;
				margin-left: 28upx;
			}
		}
	}
</style>
